<template>
  <div class="content-section">
    <h3>Sign in</h3>
    <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 24 }"
        autocomplete="off"
        @finish="onFinish"
    >
      <a-form-item name="username" :rules="rules.username">
        <div  class="form-group">
          <a-input type="email" v-model:value="formState.username" class="custom-input" placeholder="Email" allowClear />
        </div>
      </a-form-item>
      <a-form-item name="password" :rules="rules.password">
      
        <div  class="form-group">
          <a-input type="password" v-model:value="formState.password" class="custom-input" placeholder="Password" allowClear />
        </div>
      </a-form-item>
      <div class="forgot-password">
        <a-image  :preview="false"  :src="SVG_ICONS.forgot" style="width: 20px; height: 20px;" alt="forgot" /> <span class="forgot-password-text" @click="forgotPassword">Forgot password?</span>
      </div>
      <a-form-item :wrapper-col="{ span: 24 }">
        <a-button class="signIn" type="primary" html-type="submit" :loading="loading">Sign in</a-button>
      </a-form-item>
      <!-- <button class="submit-btn">Sign in</button> -->
    </a-form>
    
  </div>
  
</template>

<script lang="ts" setup>
import { ref, reactive, defineAsyncComponent, defineEmits } from 'vue'
import SVG_ICONS from "../../../assets/SVG_ICONS"
import type { Rule } from 'ant-design-vue/es/form'

import { login, register } from "@/api/user";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store/user";
import { message } from "ant-design-vue";
import { Local } from '@/utils/storage';

const emit = defineEmits(['switch-nav']);

const router = useRouter();
const userStore = useUserStore();
const loading = ref(false);

interface FormState {
  username: string;
  password: string;
}
const formState = reactive<FormState>({
  username: "",
  password: "",
});
const rules: Record<string, Rule[]> = {
  username: [
    { required: true, message: "Please enter your email address" },
    { type: "email", message: "Please enter the correct email format" },
  ],
  password: [
    { required: true, message: "Please input a password" },
    // { len: 8, message: "The password length must be 8 digits" },
  ],
};
const onFinish = async (values: any) => {
  loading.value = true;
  try {
    const res = await login(formState);
    if (res.code === 200) {
      userStore.setUserInfo(res.result);
      userStore.setToken(res.result.token);
      userStore.setEmail(res.result.email);
      Local.set('refresh_token', res.result.refresh_token);
      message.success('Login successful');
      router.push("/user/profile");
    } else {
      message.error(res.message || 'Login failed');
    }
  } catch (error) {
    console.error('Form submission error:', error);
    message.error('Login failed. Please try again.');
  } finally {
    loading.value = false;
  }
};


const forgotPassword = () => {
  console.log('Forgot password clicked');
  emit('switch-nav', 'forgot');
};
</script>

<style lang="scss" scoped>
.content-section {
  animation: fadeIn 0.3s ease;
  position: relative;
}

.form-group {
  margin-bottom: 20px;
}

.custom-input {
  width: 370px; 
  height: 40px;
  border-radius: 0px; 
  border-top: none; 
  border-left: none; 
  border-right: none; 
  border-bottom: 1px solid #71767f;
  transition: border-color 0.3s ease;
}

/* 覆盖ant-design默认的focus样式，但保留下边框 */
:deep(.ant-input:focus),
:deep(.ant-input-focused),
:deep(.ant-input-affix-wrapper:focus),
:deep(.ant-input-affix-wrapper-focused) {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
   /* 焦点状态时下边框颜色可以稍深 */
  box-shadow: none !important;
  outline: none;
}

/* 覆盖hover状态的样式 */
:deep(.ant-input:hover),
:deep(.ant-input-affix-wrapper:hover) {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  /* border-bottom: 1px solid #71767f !important; */
  box-shadow: none !important;
}

a-input {
  width: 100%;
  padding: 12px;
  border: none;
  border-bottom: 1px solid #71767f;
  /* border-radius: 4px; */
  font-size: 14px;
}

.signIn {
  width: 100%;
  padding: 20px;
  color: white;
  border: none;
  border-radius: 30px;
  font-size: 16px;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  cursor: pointer !important;
  pointer-events: auto !important;
  background-color: #71767f; /* 使用Ant Design的主色 */
}

/* 覆盖Ant Design组件内部样式 */
:deep(.signIn) {
  pointer-events: auto !important;
}

:deep(.ant-btn) {
  pointer-events: auto !important;
}

.signIn:hover {
  background-color: #000;
}
.forgot-password {
  display: flex;
  align-items: center;
  justify-content: left;
}
.forgot-password-text {
  font-size: 14px;
  color: #000;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  margin-left: 10px;
}

.login-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style> 